<template>
	<view :style="theme">
		<view class="bj"></view>
		<view class="head">
			<view class="f36 c2">
				{{info.courseName}}
			</view>
			<view class="f26 c6 mt20">上课时间：{{info.timeInfo}}</view>
			<view class="f26 c6 mt20">课程时长：{{info.courseType=='4'?formatSeconds(info.duration):info.classNum?info.classNum: 0}}{{info.courseType=='4'?'':'课时'}}</view>
			<view class="f26 c6 mt20">上课地点：{{info.site}}</view>
			<view class="f26 c6 mt20">上课老师：{{info.teacherName  || ''}}</view>
			<!-- <view class="f26 c6 mt20">签到学员：<block v-for="(item, index) in info.students" :key="index">{{item.name}}</block></view> -->
		</view>
		<view class="card">
			<view class="f34 c2 fw5">
				选择签到学员
			</view>
			<checkbox-group @change="checkboxChange">
				<block v-for="(item, index) in info.students" :key="index">
					<label v-if="item.status !='1'" class="flex-c xueyuan">
						<image :src="imgHost+'/user.png'" class="student-l"></image>
						<view class="student-cnt">
							<view class="name">{{item.name}}<text>{{item.sex== '1'?'男':item.sex== '2'?'女':'保密'}}</text></view>
							<view class="tel">{{item.phone}}</view>
						</view>
						<checkbox class="checkbox-backgroun-color" :value="item.recordId" :checked="item.checked" />
					</label>
				</block>
			</checkbox-group>
		</view>
		<view style="height: 150rpx;"></view>
		<view class="foot" @click="$noMultipleClicks(submit)">
			<view class="footBtn">确认签到</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick: true,
				list: [],
				info: {},
				id: '',
				students: []
			}
		},
		onLoad(ops) {
			this.id = ops.id
			// this.getList()
			this.getDetail()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jump3(url, params, a) {
				this.$app.jump3(url, params, a);
			},
			formatSeconds(e) {
			   return this.$app.formatSeconds(e);
			},
			checkboxChange(e) {
				console.log(1231, e)
				this.students = e.detail.value
			},
			getList() {
				this.$app.ajax({
					api: this.$api.studentList(),
					data: {
						param: {}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.list = res.recordList || []
					}
				}).catch(() => {})
			},
			submit() {
				let that = this
				if(!this.students || this.students.length ==0) {
					this.$app.showToast('请选择签到学员')
					return false
				}
				this.$app.ajax({
					api: that.$api.signInCourses(),
					data: {
						param: {
							recordList: this.students
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						// this.$app.showToast('签到成功')
						this.jump2('/pages/member/signin?id=', this.id)
					}
				}).catch(() => {})
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.myCourseDetail(),
					data: {
						param: {
							memberId: this.userInfo.id,
							venueId: this.venueId,
							timeId: this.id,
							showTag: '1'
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.info = res.record
					}
				}).catch(() => {})
			},


		}

	}
</script>


<style scoped lang="scss">
	.bj {
		width: 100%;
		height: 240rpx;
		background: $color;
	}
	.head {
		margin: -208rpx auto 20rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		width: 690rpx;
		box-sizing: border-box;
		padding: 30rpx;
	}
	.card {
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: auto;
		width: 690rpx;
		box-sizing: border-box;
		padding: 30rpx;
	}
	.xueyuan {
		margin-top: 30rpx;
		.student-l {
			width: 84rpx;
			height: 84rpx;
			border: 1rpx solid #F7F7F7;
			margin-right: 20rpx;
			box-sizing: border-box;
			flex: none;
		}
		.student-cnt {
			flex: 1;
			.name {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
				text {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-left: 12rpx;
				}
			}
			.tel {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 6rpx;
			}
		}
	}
	.foot {
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;
		width: 690rpx;
		z-index: 999;
	}
</style>